<template>
	<view>
		<view class="card-swiper">
			 <u-card :border="false" padding="15" :head-border-bottom="false" :foot-border-top="false">
				 <view slot="head">
					  <view class="flex-row hader-wrapper">
						  <view class="flex-row wraper-col">
							  <u-avatar :size="90" :src="dataList.user.avatar"></u-avatar>
						  </view>
						  <view class="flex-col wraper-col-two">
							  <text class="express-pick-up">
								  {{dataList.taskName}}
							  </text>
							  <view class="u-line-1 text"> {{dataList.user.userName}}</view><text class="text-two">
								  {{dataList.createTime}}
							  </text>
						  </view>
						  <view class="wraper-col-three" style="display: flex;">
							  <u-tag :text="dataList.taskStatus" type="success" shape="circleLeft" bg-color="#19be6b" color="rgba(255, 255, 255, 1)" border-color="#19be6b"></u-tag>
						  </view>
					  </view>
				 </view>
				<view slot="body">
					 <view class="flex-col body-wrapper">
						<text class="task-description text-color-base">
							任务描述:
						</text>
						<view class="u-line-2 text">{{dataList.taskDesc}}</view>
					</view>
				</view>
				<view class="" slot="foot">
					 <view class="flex-row foot-wrapper">
						<u-tag :text="'悬赏' + dataList.taskReward + '元'" shape="circle"></u-tag>
						<u-button class="button" throttle-time="500" type="primary" size="mini" shape="circle" :ripple="true" :hairLine="false">
							帮助TA
						</u-button>
					</view>
				</view>
			</u-card>
		</view>
		<!-- 间隔槽 -->
		<slot></slot>
		<!-- <u-gap height="15" bg-color="#f8f8f8"></u-gap> -->
	</view>
</template>

<script>
	export default {
		props: {
			dataList:{
				type: Object,
				default:{
					"taskId":-1,
					"taskName":"暂无数据",
					"user":{
						"userName":"暂无数据",
						"avatar":""
					},
					"createTime":"暂无数据",
					"taskStatus": -1,
					"taskDesc":"暂无数据",
					"taskReward":"暂无数据",
				}
			},
		},
		name:"taskCard",
		data() {
			return {
				valueList:'',
				// dataList:this.dataList,
			};
		},
		watch:{
			dataList(newVal){
				this.valueList = newVal;
				// this.$emit('update',newVal)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-swiper{
		.hader-wrapper {
			justify-content: space-between;
			.wraper-col {
				flex: 1;
				justify-content: center;
				padding: 34rpx 0rpx 30rpx 0rpx;
			}
			.wraper-col-two {
				flex: 3;
				padding: 20rpx 0rpx;
				.express-pick-up {
					margin-bottom: 10rpx;
					font-size: 32rpx;
					line-height: 28rpx;
				}

				.text {
					width: 100%;
					margin-bottom: 10rpx;
					font-size: 28rpx;
				}

				.text-two {
					width: 242rpx;
					font-size: 28rpx;
					line-height: 28rpx;
				}
			}

			.wraper-col-three {
				// width: 172rpx;
				// flex: 2;
				// padding: 51rpx 0rpx 51rpx 28rpx;
			}
		}
		.body-wrapper {
			// width: 612rpx;
			padding: 20rpx 0rpx 24rpx 30rpx;
			// border-width: 2rpx;
			border-color: #fcbd71;
			background: rgba(255, 176, 97, 0.18);
			.task-description {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		
			.text {
				width: 544rpx;
			}
		}
		.foot-wrapper{
			// justify-content: space-between;
			// padding: 12rpx 16rpx 12rpx 460rpx;
			// background: rgba(6, 6, 6, 0.3);
			justify-content: flex-end;
			.button {
				margin-left: 10rpx;
				width: 120rpx;
			}
		}
	}
		
</style>
